<template>
  <div>
    <div class="banner">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img v-lazy="image" class="banner-img" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        @load="onLoad"
        :immediateCheck="false"
      >
        <ul class="list">
          <li v-for="item in dataItem" :key="item.id">
            <img :src="item.pic" class="list-img">
            <div class="info">
              <p class="title">{{item.title}}</p>
              <p class="des">{{item.digest}}</p>
              <div class="active">
                <van-button type="primary" size="small" class="btn" @click="handlePlay(item.viewUrl, item.id)">播放</van-button>
                <van-button type="primary" size="small" class="btn btn-line" @click="handleDown(item.downloadUrl, item.id)">下载</van-button>
              </div>
            </div>
            <div class="clearfix"></div>
          </li>
        </ul>
      </van-list>

    </van-pull-refresh>

    <p style="line-height: 50px; text-align: center;" v-if="finished">数据已全部加载 ~~</p>
  </div>
</template>

<script>
import { Swipe, SwipeItem, PullRefresh, List } from 'vant'

export default {
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [PullRefresh.name]: PullRefresh,
    [List.name]: List
  },
  created() {
    this.getData()
  },
  computed: {
    openId() {
      return window.localStorage.openId
    },
    profile() {
      return window.localStorage.profile
    }
  },
  data() {
    return {
      images: [
        'http://ken.bbdry.com/banner1.png',
        'http://ken.bbdry.com/banner1.png'
      ],
      dataItem: [],
      page: 1,
      limit: 10,
      loading: false,
      finished: false,
      isLoading: false
    }
  },
  methods: {
    getData() {
      let oldData = this.dataItem
      this.$http('/api/video/ls', {
        page: this.page,
        limit: this.limit
      }).then(data => {
        if(data.length) {
          this.dataItem = this.page === 1? data: [...oldData, ...data]
        }
        this.finished = !data || data.length < this.limit
        this.loading  = false
        this.isLoading = false
      }).catch(err => {
        this.loading  = false
        this.isLoading = false
      })
    },
    onRefresh() {
      this.page = 1
      this.finished = false
      this.getData()
    },
    onLoad() {
      if (this.finished) {
        return
      }
      this.page = this.page + 1
      this.getData()
    },

    handlePlay(url, id) {
      if (window.localStorage.profile == 1) {
        this.countClick(1, id)
        window.location = url
      } else {
        this.$router.push({path: '/enroll'})
      }


    },

    handleDown(url, id) {
      if (window.localStorage.profile == 1) {
        this.countClick(2, id)
        window.location = url
      } else {
        this.$router.push({path: '/enroll'})
      }

    },

    countClick(type, id) {
      this.$http('/api/video/log', {
        type,
        videoId: id,
        openId: window.localStorage.openId
      })
    }
  }
}
</script>
<style scoped>
.banner, .banner-img{
  width: 375px;
  height: 125px;
}
.list{
  padding: 0px 10px;
  background: #fff;
  margin: 0;
  list-style: none;
  min-height: 500px;
}
.list li{
  height: 100px;
  margin-top: 12px;
  margin-bottom: 12px;
}
.list li img{
  height: 100px;
  width: 100px;
  display: block;
  float: left;
}
.list .info{
  margin-left: 110px;
}
.list .info .title{
  font-size: 16px;
  color: #333;
  font-weight: bold;
  line-height: 30px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.list .info .des{
  font-size: 12px;
  color: #8f8f8f;
  height: 36px;
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.list .active {
  margin-top: 5px;
}
.list .active .btn{
  margin-right: 8px;
  border-radius: 30px;
  padding: 0px 18px;
}
.btn-line{
  background: #fff;
  color: #079d17;
}
</style>

